<template>
	<div class="app-container" v-loading="loading">
		<div class="search-container  app_ny">
			<div class="div2" style="position: relative">
				<el-row :gutter="12" style="width: 100%">
					<el-col :span="6">
						<el-date-picker
							style="width: 100%"
							v-model="queryParams.check_date"
							clearable
							type="daterange"
							unlink-panels
							range-separator="To"
							start-placeholder="开始日期"
							end-placeholder="截止日期"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>	
					</el-col>
					<el-col :span="3">
						<el-select v-model="queryParams.type" placeholder="请选择业务名称" clearable>
							<el-option v-for="item in BUSINESS_TYPE" :key="item.name" :label="item.name"
								:value="item.name" />
						</el-select>

					</el-col>
					<el-col :span="3">
						<el-input v-model="queryParams.engine" placeholder="请输入工程名称" clearable
							@keyup.enter="handleQuery" />
					</el-col>
					
					<el-col :span="6">
						<el-button :loading="loading" type="primary" @click="handleQuery"><template
								#icon><i-ep-search /></template>查询</el-button>
					</el-col>
				</el-row>
				<FilterColumn class="filtBox" @handleRefresh="resetQuery()" :strtype="strtype"></FilterColumn>
			</div>
		</div>

		<el-card shadow="never">
			
			<div class="action-row">
				<el-button v-hasPerm="['ledger.Ledger/save']"   @click="handleDo('','act_add')" type="primary" plain><template #icon><i-ep-plus /></template>新增</el-button>
				<el-button @click="handleDo('', 'act_info')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-document/></template>详情</el-button>
				<el-button v-hasPerm="['ledger.Ledger/update']" @click="handleDo('', 'act_edit')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-edit/></template>修改</el-button>
				<el-button v-hasPerm="['ledger.Ledger/delete']" @click="handleDo('', 'act_del')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-delete/></template>删除</el-button>
				<el-button v-hasPerm="['ledger.Schedule/index']"  @click="handleDo('', 'act_prolist')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-operation/></template>项目进度</el-button>
			</div>

			<el-table ref="dataTableRef" v-loading="loading" 
				:data="tableData"
				align="left"
				tooltip-effect="dark"
				:show-overflow-tooltip="true"
				:scrollbar-always-on="true"
				border
				@cell-mouse-enter="rowMouse"
				@cell-mouse-leave="menuLineVisible=false"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" align="center" width="55" />
				<el-table-column type="index" label="序号" align="center" width="80" />
				<template v-for="(item,index) in cColumnsList()" :key='index'>
					<el-table-column :label="item.label" :align="item.align" :prop="item.prop" :width="item.width" :min-width="item.minwidth">
						<template #default="scope" v-if="item.prop == 'is_weituo'">
							{{scope.row.is_weituo == 1?"是":"否"}}
						</template>
						<template #default="scope" v-if="item.prop == 'mark'">
							{{scope.row.mark?scope.row.mark:"无"}}
						</template>
					</el-table-column>
				</template>
				
			</el-table>
			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
				v-model:limit="queryParams.limit" @pagination="handleQuery" />
		</el-card>

		<!-- 编辑 or 添加 -->
		<aggravateListEdit v-if="dialogAdd.visible" v-model="dialogAdd.visible" :dialogTitle="dialogAdd.title"
			:dialogTableValue="dialogAdd.value" :dialogStatus="dialogAdd.status" @initRefreshList="handleQuery">
		</aggravateListEdit>

		<!-- 添加进度 -->
		<aggravateListProgress v-if="dialogProgress.visible" v-model="dialogProgress.visible"
			:dialogTitle="dialogProgress.title" :dialogTableValue="dialogProgress.value"
			:dialogStatus="dialogProgress.status" @initRefreshList="handleQuery"></aggravateListProgress>

	</div>
</template>
<script setup lang="ts">
	import { useRoute } from 'vue-router';
	import _ from 'lodash-es'
	import { useUserStore } from "@/store/modules/user";
	import { useTableFilterStore } from "@/store/modules/tableFilter";
	import aggravateListEdit from "./components/aggravateListEdit.vue";
	import aggravateListProgress from "./components/aggravateListProgress.vue";
	import { BUSINESS_TYPE } from "@/utils/constant"
	import {
		getLedgerList,
		deleteLedger
	} from "@/api/aggravate";

	const TableFilter = useTableFilterStore();
	const strtype = ref('aggravateList'); //数据
	const userStore = useUserStore();

	// 表格标题
	const cTitles = ["工程名称", "主体单位", "建设运行单位", "编制对接单位", "项目类别", "送审价", "财政评审单位", "审定价", "审増审减额", "中标价", "审核日期", "是否已签订委托合同", "备注"];
	// 显示字段
	const sTitles = [ "工程名称", "主体单位", "项目类别", "送审价",  "中标价", "审核日期"];
	// 字段属性
	const cColumns = [
	
		{ label: '工程名称', prop: 'engine.name', align: 'center', minwidth: 200 },
		{ label: '主体单位', prop: 'main_name', align: 'center', minwidth: 200 },
		{ label: '建设运行单位', prop: 'jianshe', align: 'center', minwidth: 200 },
		{ label: '编制对接单位', prop: 'bianzhi', align: 'center', minwidth: 200 },
		{ label: '项目类别', prop: 'type', align: 'center', minwidth: 150 },
		{ label: '送审价', prop: 'songshen', align: 'center', minwidth: 150 },
		{ label: '财政评审单位', prop: 'pingshen', align: 'center', minwidth: 200 },
		{ label: '审定价', prop: 'shending', align: 'center', minwidth: 150 },
		{ label: '审増审减额', prop: 'difference', align: 'center', minwidth: 150 },
		{ label: '中标价', prop: 'zhongbiao', align: 'center', minwidth: 150 },
		{ label: '审核日期', prop: 'check_date', align: 'center', minwidth: 150 },
		{ label: '是否已签订委托合同', prop: 'is_weituo', align: 'center', minwidth: 200 },
		{ label: '备注', prop: 'mark', align: 'center', minwidth: 250 },
	]
	interface TableGlobalLocal {
		[key : string] : any; // 或者更具体的类型
	}
	// 列表渲染
	function cColumnsList() {
		const ColumnsList = (TableFilter.tableGlobalLocal as TableGlobalLocal)[strtype.value + '_checklist'];
		if (ColumnsList) {
			const columnMap : any = {}; // 创建一个对象来存储cColumns中label和对象的映射  
			// 预先建立label到对象的映射  
			for (const column of cColumns) {
				columnMap[column.label] = column;
			}
			const newList = [];
			for (const label of ColumnsList) {
				// 尝试从映射中获取对象  
				const foundColumn = columnMap[label];
				if (foundColumn) {
					// 如果找到了，则添加到newList中  
					newList.push(foundColumn);
				}
			}
			return newList;
		}
		else {
			return [];
		}
	};
	// 列表-数据列初始化
	function columnsInit() {
		const dropColStr : string = strtype.value + '_dropCol';
		const checklistStr : string = strtype.value + '_checklist';
		const drop_col : any = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr];
		const checklist = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr];
		if (!drop_col) {
			(TableFilter.tableGlobalLocal as TableGlobalLocal)[dropColStr] = JSON.parse(JSON.stringify(cTitles));
			(TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr] = JSON.parse(JSON.stringify(cTitles));
		}
		if (!checklist) {
			(TableFilter.tableGlobalLocal as TableGlobalLocal)[checklistStr] = JSON.parse(JSON.stringify(sTitles));
			(TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr] = JSON.parse(JSON.stringify(sTitles));
		}
	}


	const queryParamsData={
		page: 1,
		limit: 20,
		type: "",
		engine: "",
		check_date: ""
	}
	//搜索-字段配置
	const queryParams = reactive(JSON.parse(JSON.stringify(queryParamsData)));
	const loading = ref(false);//页面加载load

	const total = ref(0);
	const tableData = ref<any>([]);
	const multipleSelection =ref<any>([]);
	const menuLineVisible =ref(true);
	const rowR = ref<any>({});
	
	
	const dialogAdd = reactive<any>({
		title: "添加信息", //弹窗标题
		visible: false,   //弹窗显示or隐藏
		status: "add_art", //弹窗状态类型  :添加 add_art 编辑 edit_art 详情 detail_art  
		value: {}   		  //携带整条参数 row
	});
	const dialogProgress = reactive<any>({
		title: "添加进度", //弹窗标题
		visible: false,   //弹窗显示or隐藏
		status: "add_art", //弹窗状态类型  :添加 add_art 编辑 edit_art 详情 detail_art  
		value: {}   		  //携带整条参数 row
	});

	
	// 行菜单事件
	function rowMouse(row:any) {
		menuLineVisible.value = true
		rowR.value = row
	}
	// 数据多选事件
	function handleSelectionChange(val:any) {
		multipleSelection.value = val
	}
	// 操作按钮样式
	function buttonType(val:number) {
	 	if (val === 1) {
	 		return 'primary'
	 	} else {
	 		return 'info'
	 	}
	} 


	

	// 操作
	function handleDo(row:any, act:string) {
		
		switch (act) {
			case 'act_add':
				dialogAdd.status = act
				dialogAdd.visible = true;
				dialogAdd.title = '添加信息';
				dialogAdd.value = {};
				break
			case 'act_info':
				dialogAdd.status = act
				var rowItem= JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
				dialogAdd.visible = true;
				dialogAdd.title = '工单详情';
				dialogAdd.value = rowItem;
				break
			case 'act_edit':
				dialogAdd.status = act
				var rowItem= JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
				dialogAdd.visible = true;
				dialogAdd.title = '修改信息';
				dialogAdd.value = rowItem;
				break
			case 'act_prolist':
				var rowItem= JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
				dialogProgress.title = '进度列表';
				dialogProgress.status = act
				dialogProgress.value = rowItem;
				dialogProgress.visible = true;
				break	
			case 'act_del':
				handleDelete(JSON.parse(JSON.stringify(row || multipleSelection.value[0])))
				break
				
			default:	
		}
	}  
	

	// 删除表单内容
	function handleDelete(row ?: any) {
		const Ids =row.id;
		if (!Ids) {
			ElMessage.warning("请勾选删除项");
			return;
		}
		ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(() => {
			loading.value = true;
			deleteLedger({id:Ids})
				.then(() => {
					ElMessage.success("删除成功");
					resetQuery();
				})
				.finally(() => (loading.value = false));
		});
	}
	// 初始化搜索内容
	function handleQuery() {
		loading.value = true;
		getLedgerList(queryParams).then((res) => {
			tableData.value = res.data.list
			total.value = res.data.count
		}).finally(() => {
			loading.value = false;
		})
	}
	// 重置搜索内容
	function resetQuery() {
		handleQuery();
	}
	onMounted(() => {
		handleQuery();
		columnsInit();
	});
</script>

<style lang="scss" scoped>

</style>